<template>
	<view class="content">
		<head-search></head-search>
		<swiper-list :swiperList="swiperList"></swiper-list>
		<recommend-list :recommendListData="recommendListData"></recommend-list>
		<recommend-list :recommendListData="hotrecommendListData" title="热门菜谱"></recommend-list>
		<rticlea-list ref="rticleaRef"></rticlea-list>
		<scroll-top :scrollTop="scrollTop"></scroll-top>
	</view>
</template>

<script>
	import swiperList from '../../components/swiperList.vue'
	import recommendList from '../../components/recommendList.vue'
	import rticleaList from '../../components/rticleaList.vue'
	import headSearch from '../../components/headSearch.vue'
	export default {
		components: {
			swiperList,
			recommendList,
			rticleaList,
			headSearch
		},
		data() {
			return {
				swiperList: [],
				recommendListData: [],
				hotrecommendListData:[],
				scrollTop: 0
			}
		},
		onLoad() {
			this.getSwiperList()
			this.getRecommendList()
			this.getHotRecommendList()
		},
		methods: {
			getSwiperList() {
				this.$api.getSwiperList().then(res => {
					if (res.code) {
						this.swiperList=res.data
					}
				})
			},
			getRecommendList(){
				this.$api.getRecommendList().then(res=>{
					if(res.code){
						this.recommendListData=res.data
					}
				})
			},
			getHotRecommendList(){
				this.$api.getHotRecommendList().then(res=>{
					if(res.code){
						this.hotrecommendListData=res.data
					}
				})
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		onReachBottom() {
			this.$refs.rticleaRef.getRticleabyType()
		}
	}
</script>

<style lang="scss" scoped>

</style>
